<script setup lang="ts">
import { getCurrentPathMenu } from '@util/RouterUtil'
import { computed, ref } from 'vue'

const menu = ref(getCurrentPathMenu())
const defaultActive = computed(() => window.location.pathname)
</script>

<template>
  <div>
    <el-menu router :default-active="defaultActive">
      <div v-for="item in menu" :key="item.path">
        <div v-if="item.children && item.children.length > 0">
          <el-sub-menu :index="item.path">
            <template #title>
              {{ item.text }}
            </template>
            <div v-for="child in item.children" :key="child.path">
              <el-menu-item :index="child.path">
                {{ child.text }}
              </el-menu-item>
            </div>
          </el-sub-menu>
        </div>
        <div v-else>
          <el-menu-item :index="item.path">
            {{ item.text }}
          </el-menu-item>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<style scoped lang="less">
.el-menu {
  border-right: none;
  background: none;

  * {
    background: none;
  }
}
</style>
